﻿@{
    Layout = null;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抽奖活动</title>
    <link href="~/css/ActZhounianQing/abc.css" rel="stylesheet" />
    <script src="~/js/jquery.js"></script>
    <script src="~/js/jQueryRotate.2.1.js"></script>


    <script type="text/javascript">

        var ZjResult = 0;
        var openid = "@ViewBag.openid";
        var isZhuan = false;
        var avgAngle = 360 / 6;
        var isChouJiang = "@ViewBag.isChouJiang";

        var rotateFunc = function (angle) {
            $("#dial").rotate({
                angle: 0,
                animateTo: angle + 1800,
                duration: 8000,
                callback: function () {
                    if (isChouJiang != "1") {
                        tjjieg();
                    }
                    if (ZjResult % 2 == 0) {
                        alert("恭喜你中大奖啦，你的兑奖密钥为:" + openid);
                    } else {
                        alert("不好意思，你没有中奖！");
                    }
                }
            });
        }

        var roll = function () {
            if (!isZhuan) {
                var angle = 0;
                var Rand_num = rnd(1, 6);
                if (Rand_num % 2 == 0 && isChouJiang != "1") {
                    $.ajax({
                        url: '@Url.Action("YanZheng", "ActZhounianQing")',
                        type: 'post',
                        data: { openid: openid },
                        beforeSend: function () {
                            showLoading();
                        },
                        complete: function () {
                            hideLoading();
                        },
                        success: function (data) {
                            if (data != "1") {
                                Rand_num = 3;
                                ZjResult = 3;
                            }
                            Rand_num = Rand_num - 1;
                            rotateFunc(avgAngle / 2 + (Rand_num - 1) * avgAngle);
                            isZhuan = true;
                        }
                    });
                } else {
                    Rand_num = Rand_num - 1;
                    rotateFunc(avgAngle / 2 + (Rand_num - 1) * avgAngle);
                    isZhuan = true;
                }
            }
        }

        $(document).ready(function () {
            if (isChouJiang == "1") {
                roll();
            }
            $("#pointer").bind("click", roll);
        });

        function rnd(n, m) {
            var random = Math.floor(Math.random() * (m - n + 1) + n);
            random = "@ViewBag.ZjResult";
            ZjResult = random;
            return random;

        }

        function showLoading() {
            var margintop = (document.documentElement.clientHeight) / 2 - 20;
            //  var marginleft = (document.documentElement.clientWidth) / 2 - 20;
            $("#subLoadDiv").css({ "margin-top": margintop });
            $("#loadDiv").show();
        }

        function hideLoading() {
            $("#loadDiv").hide();
        }


    </script>

    <style>
        #lottery {
            width: 20rem;
            height: 20rem;
            position: absolute;
            top: 18.3rem;
            left: 50%;
            margin-left: -10rem;
        }

            #lottery img {
                width: 100%;
                vertical-align: middle;
            }

        #dial {
            width: 100%;
            height: 20rem;
            position: absolute;
            top: 0;
            left: 0;
        }

        #pointer {
            width: 4rem;
            position: absolute;
            top: 0px;
            left: 50%;
            top: 33%;
            margin-left: -2rem;
            cursor: pointer;
        }
    </style>
</head>
<body style="background-image: url('@Url.Content("~/images/ActZhounianQing/bodyBG.png")'); background-size: 100% 100%; background-repeat: no-repeat; background-color: #BB0000; overflow-x: hidden;">
    <div class="banner">
        <div id="lottery">
            <p id="dial">
                <img src="@Url.Content("~/images/ActZhounianQing/zp.png")" />
            </p>
            <p id="pointer">
                <img src="@Url.Content("~/images/ActZhounianQing/zj.png")" />
            </p>
        </div>
        <div style="width: 100%; height: 100%; display: none; position: absolute; top: 0px; left: 0px;" id="loadDiv">
            <div id="subLoadDiv" style="text-align: center">
                <img src="@Url.Content("~/images/load.gif")" />
                <br />
                <span style="color: #b200ff; font-size: 20px; font-family: YouYuan">启动中...</span>
            </div>
        </div>
        @*    <div class="turnplate" >
           <canvas class="item" id="wheelcanvas" width="422" height="422"></canvas>
            <img class="pointer" src="~/images/ActZhounianQing/turnplate-pointer.png" />
             <img src="~/images/ActZhounianQing/zp.png" width="422" height="422" />
            <img src="~/images/ActZhounianQing/zj.png" class="pointer"  />
        
        </div>   *@
    </div>
</body>
</html>


<script type="text/javascript">
    function tjjieg() {
        $.ajax({
            url: '@Url.Action("Receipt", "ActZhounianQing")',
            type: 'post',
            data: { openid: openid, result: ZjResult },
            success: function (data) {
                //进行跳转
            }
        });
    }
</script>
